<template>
    <div class="musicFrom">
        <div class="musciFrom_top">
            <span class="top_left">推荐歌单</span>
            <van-button round type="default">更多></van-button>
        </div>
        <div class="music_Swiper">
            <van-swipe :loop="false" :width="150" class="my-swpie" :show-indicators="false">
                <van-swipe-item v-for="(music, index) in musicList" :key="index">
                <router-link :to="{path:'/itemMusic',query:{id:music.id}}">
                    <img :src="music.picUrl" />
                    <span class="playCount">播放量：{{ count(music.playCount) }}</span>
                    <span>{{ music.name }}</span>
                    </router-link>
                </van-swipe-item>

            </van-swipe>
        </div>
    </div>
</template>

<script>
import { getMusic } from "@/request/api/home";
export default {
    data() {
        return {
            musicList: [],
        }
    },
    methods: {
        async getdata() {
            const res = await getMusic()
            console.log(res)
            this.musicList = res.data.result
        },
        count(num) {
            if (num >= 10000) return (num / 10000).toFixed(1) + '万'
        }
    },
    mounted() {
        this.getdata()
    }
}
</script>

<style lang="less">
.musicFrom {
    width: 100%;
    height: 5rem;
    padding: 0 .2rem;

    .musciFrom_top {
        width: 100%;
        height: 0.6rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .top_left {
            font-weight: 900;
            font-size: .4rem;
        }
    }

    .my-swpie {
        width: 100%;
        height: 200px;

        img {
            width: 100%;
            height: 70%;
        }

        .playCount {
            position: absolute;
            // z-index: 999;
            right: 0%;
            color: white;
        }
    }
}
</style>